<script lang="ts">
import { defineComponent } from "vue";
import { login } from "@/api/login";

export default defineComponent({
  name: "LoginView",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    async submit() {
      if (this.verify()) {
        const result = await login({
          username: this.username,
          password: this.password,
        });
        console.log(result);
      } else {
        this.$message({
          type: "warning",
          message: "请输入账号或者密码",
        });
      }
    },
    verify() {
      return !!(this.username && this.password);
    },
  },
});
</script>

<template>
  <div class="login">
    <img class="login-bg" src="../../assets/static/login_bg.svg" alt="login" />
    <div class="container">
      <div class="inner">
        <h3>极简后台管理</h3>
        <el-input
          class="inp-box-cur"
          placeholder="请输入用户名"
          v-model.trim="username"
        ></el-input>
        <el-input
          class="inp-box-cur"
          placeholder="请输入密码"
          type="password"
          v-model.trim="password"
        ></el-input>
        <div class="inp-box">
          <el-button type="primary" @click="submit">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use "./index.scss";
</style>
